<template>
    <div id="cesiumContainer"></div>
    <div id="infoBox" style="display: flex; justify-content: space-around; font-size: 14px;">
        <p>鼠标经度: <span id="longitude">N/A</span></p>
        <p>鼠标纬度: <span id="latitude">N/A</span></p>
        <p>相机Heading: <span id="heading">N/A</span></p>
        <p>相机Pitch: <span id="pitch">N/A</span></p>
        <p>相机Roll: <span id="roll">N/A</span></p>
        <div>相机高度: <span id="cameraHeight">N/A</span></div>
    </div>
    <!-- 渲染子组件，并传递 viewer 变量 -->
    <HongHuVue  :viewer="cesiumViewer"  />
</template>

<script setup lang='ts'>
import { ref, onMounted, provide } from 'vue';

import * as Cesium from "cesium";
import { CesiumViewer } from '../scripts/cesiumConfig.ts';

import { gdImageryLayer,LocalTerrainServer } from '../scripts/mapLoader.ts';
import { wuhanBaimo } from '../scripts/3dtilesLoader.ts';

import HongHuVue from './honghuModel/loadHonghu.vue';



const cesiumViewer = ref<Cesium.Viewer | null>(null);
let viewer:Cesium.Viewer;

let scene:Cesium.Scene;

onMounted(async () => {

// NOTE:Cesium离线运行

viewer = CesiumViewer("cesiumContainer");
// console.log("viewer:",viewer);
cesiumViewer.value = viewer;//向子组件传值

scene = viewer.scene;

const infoBox = document.getElementById('infoBox');
const longitudeSpan = document.getElementById('longitude');
const latitudeSpan = document.getElementById('latitude');
const headingSpan = document.getElementById('heading');
const pitchSpan = document.getElementById('pitch');
const rollSpan = document.getElementById('roll');
const heightSpan = document.getElementById('cameraHeight');

// 鼠标移动监听
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((movement) => {
  const cartesian = viewer.scene.pickPosition(movement.endPosition);
  if (cartesian) {
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      const longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
      const latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);

      longitudeSpan.innerText = longitude;
      latitudeSpan.innerText = latitude;
  } else {
      longitudeSpan.innerText = 'N/A';
      latitudeSpan.innerText = 'N/A';
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

// 相机变化监听
viewer.scene.postRender.addEventListener(() => {
  const camera = viewer.camera;

  const heading = Cesium.Math.toDegrees(camera.heading).toFixed(2);
  const pitch = Cesium.Math.toDegrees(camera.pitch).toFixed(2);
  const roll = Cesium.Math.toDegrees(camera.roll).toFixed(2);

  headingSpan.innerText = heading;
  pitchSpan.innerText = pitch;
  rollSpan.innerText = roll;

  const cameraPosition = viewer.camera.positionCartographic;
  const cameraHeight = cameraPosition.height.toFixed(2); // 相机高度（米）
  // 在页面中显示相机高度
  heightSpan.innerText = cameraHeight;
  
});


// 加载高德地图
const gdImageryProvider = gdImageryLayer();
viewer.imageryLayers.addImageryProvider(gdImageryProvider);



// ------------------------------------
// 在此处添加你的代码


// 武汉市白模
// const baimo = wuhanBaimo();
// viewer.scene.primitives.add(baimo);



//-------------------代码结束---------------------

});
</script>

<style scoped>
#cesiumContainer{ 
  width: 100%;
  height: 100vh; 
  padding: 0;
  margin: 0;
  overflow:
  hidden;
}
#infoBox{
  position: fixed; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  background: rgba(42, 42, 42, 0.8); 
  color: white; 
  padding: 10px; 
  border-top: 2px solid #fff; 
  font-family: Arial, sans-serif; 
  z-index: 1000; 
  box-sizing: border-box;
}
</style>